<template>
<div id="measureTools">
    <el-dropdown @command="dev">
        <span class="el-dropdown-link">
                <i class="iconfont icon-shebeizhonglei"></i>
                  {{dev_item}}
                <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item ref="turbe" id="turbe" command="turbe">管网</el-dropdown-item>
            <el-dropdown-item ref="tap" id="tap" command="tap">阀门</el-dropdown-item>
            <el-dropdown-item ref="fireplug" id="fireplug" command="fireplug">消防栓</el-dropdown-item>
            <el-dropdown-item ref="monitor" id="monitor" command="monitor">监测仪器</el-dropdown-item>
            <el-dropdown-item ref="others" id="others" command="others">其他</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
    <el-dropdown @command="type">
        <span class="el-dropdown-link">
                <i class="iconfont icon-ditu"></i>
                  {{type_item}}
                <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item ref="d_2" id="d_2" command="d_2">平面</el-dropdown-item>
            <el-dropdown-item ref="earthMap" id="earthMap" command="earthMap">卫星</el-dropdown-item>
            <el-dropdown-item ref="d_3" id="d_3" command="d_3">地形图</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
    <el-dropdown @command="measure">
        <span class="el-dropdown-link">
                <i class=" iconfont icon-gongjusvg"></i>
                  {{measure_item}}
                <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item ref="measuringDistance" id="measure_distance" command="measuringDistance">测距</el-dropdown-item>
            <el-dropdown-item ref="measuringSurface" id="measure_area" command="measuringSurface">测面</el-dropdown-item>
            <el-dropdown-item ref="dot" id="dot" command="dot">标点</el-dropdown-item>
            <el-dropdown-item ref="furface" id="furface" command="furface">标面</el-dropdown-item>
            <el-dropdown-item ref="clearAll" id="clearAll" command="clearAll">清除所有</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</div>
</template>

<script>
export default {
    data() {
        return {
            dev_item: "设备",
            type_item: "底图",
            measure_item: "工具"
        };
    },
    methods: {
        dev(val) {
            let temp_val = val;
            let temp_ele = "";
            let that = this;
            switch (temp_val) {
                case "turbe":
                    temp_ele = that.$refs.turbe;
                    that.dev_item = "管网";
                    break;
                case "tap":
                    temp_ele = that.$refs.tap;
                    that.dev_item = "阀门";
                    break;
                case "fireplug":
                    temp_ele = that.$refs.fireplug;
                    that.dev_item = "消防栓";
                    break;
                case "monitor":
                    temp_ele = that.$refs.monitor;
                    that.dev_item = "监测仪器";
                    break;
                case "others":
                    temp_ele = that.$refs.others;
                    that.dev_item = "其它";
                    break;
            }
            let temp_str = that.dev_item;
            this.$emit("handleThisDom", {
                ele: temp_ele,
                tmpStr: temp_str
            });
        },
        type(val) {
            let temp_val = val;
            let temp_ele = "";
            let that = this;
            switch (temp_val) {
                case "d_2":
                    temp_ele = that.$refs.d_2;
                    that.type_item = "平面";
                    break;
                case "earthMap":
                    temp_ele = that.$refs.earthMap;
                    that.type_item = "卫星";
                    break;
                case "d_3":
                    temp_ele = that.$refs.d_3;
                    that.type_item = "地形";
                    break;
            }
            let temp_str = that.type_item;
            this.$emit("handleThisDom", {
                ele: temp_ele,
                tmpStr: temp_str
            });
        },
        measure(val) {
            let temp_val = val;
            let temp_ele = "";
            let that = this;
            switch (temp_val) {
                case "measuringDistance":
                    temp_ele = that.$refs.measuringDistance;
                    that.measure_item = "测距";
                    break;
                case "measuringSurface":
                    temp_ele = that.$refs.measuringSurface;
                    that.measure_item = "测面";
                    break;
                case "dot":
                    temp_ele = that.$refs.dot;
                    that.measure_item = "标点";
                    break;
                case "furface":
                    temp_ele = that.$refs.furface;
                    that.measure_item = "标面";
                    break;
                case "clearAll":
                    temp_ele = that.$refs.clearAll;
                    that.measure_item = "清除所有";
                    break;
            }
            let temp_str = that.measure_item;
            this.$emit("handleThisDom", {
                ele: temp_ele,
                tmpStr: temp_str
            });
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../../../static/pipeFont/msg/iconfont.css";
* {
    box-sizing: border-box;
}

#measureTools {
    width: 100%;
    height: 100%;
    line-height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    .el-dropdown {
        cursor: pointer;
    }
    i {
        color: rgb(158, 153, 153);
    }
}
</style>
